$(document).ready(function() {
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var measure = $("#_elevationPlot").data("measure");
        var trackID = $("#_elevationPlot").data("trackid");
        var trackName = $("#_elevationPlot").data("trackname");
        var unitOfMeasure = "Feet";
        if (measure == "m") {
            unitOfMeasure = "Meters";
        }
        var jsonData = $.ajax({
            type: "POST",
            url: "queryElevation.php",
            data: { 
                "t": trackID, 
                "m": measure
            },
            dataType: "json",
            async: false
        }).responseText;

        // Create our data table out of JSON data loaded from server.
        var data = new google.visualization.DataTable(jsonData);
        
        
        var options = {
            width:  700,
            height: 440,
            legend: {position: 'none'},
            title: trackName,
            hAxis: {title: "Time"},
            vAxis: {title: unitOfMeasure}
        };

        // Instantiate and draw our chart, passing in some options.
        //var chart = new google.visualization.LineChart(document.getElementById('_elevationPlot'));
        var chart = new google.visualization.AreaChart(document.getElementById('_elevationPlot'));
        chart.draw(data, options);
        $("#_elevationPlot").addClass("shadow");
    }
});
